<template>
  <div class="pagebig" id="pdfDom">
    <div class="pageson">
      <div class="pageabove">
        <img src="../../img/Group 111.png" alt="" />
        <p>comprovante de transação</p>
      </div>
      <div class="pagedone">
        <p class="pageorderid">
          <span class="a">ID do pedido</span
          ><span class="b"
            >{{ orderId }}&nbsp;<img
              src="../../img/copy.png"
              alt=""
              @click="copyToClip"
              v-if="copyimg"
          /></span>
        </p>
        <p class="pageMoeda">
          <span class="a">Moeda</span><span class="b">BRL</span>
        </p>
        <p class="pageMoeda">
          <span class="a">Nome</span
          ><input class="pageinputname" type="text" v-model="username" />
        </p>
        <p class="pageMoeda" v-if="document1">
          <span class="a">CPF/CNPJ</span><span class="b">{{ document }}</span>
        </p>
        <p class="pageMoeda" v-if="phone">
          <span class="a">Telefone</span><span class="b">{{ phone }}</span>
        </p>
        <p class="pageMoeda" v-if="email">
          <span class="a">Correo electrónico</span><span class="b">{{ email }}</span>
        </p>
        <p class="pageorderid">
          <span class="a">hora da transação</span
          ><span class="b">{{ orderDateTime }}</span>
        </p>
        <p class="pageMoeda">
          <span class="a">Quantidade</span><span class="c">{{ amount }}R$</span>
        </p>
        <button
          id="printButton"
          @click="getPdf"
          class="pagebutton"
          v-if="buttonif"
        >
          <img src="../../img/download.png" alt="" /> baixar conta
        </button>
        <img src="../../img/cpaycolor.png" alt="" class="pagecpayimg" />
      </div>
      <div class="pagecopysucesso" v-if="copyif">Copiado com sucesso</div>
    </div>
  </div>
</template>

<script>
import { pixPayoutCredInfoAPI } from '@/api/query'
import { copy } from '@/utils/means'
import JsPDF from 'jspdf'
export default {
  name: 'OrderPage',
  data () {
    return {
      usernameurl: this.$route.query.username,
      amounturl: this.$route.query.amount,
      documenturl: this.$route.query.document,
      timestampurl: this.$route.query.timestamp,
      amount: '---',
      document: '---',
      document1: '',
      phone: '',
      email: '',
      orderDateTime: '---',
      orderId: this.$route.query.orderId,
      username: '---',
      copyif: false,
      htmlTitle: '收费凭证',
      width: undefined,
      copyimg: true,
      buttonif: true
    }
  },
  mounted () {
    const data = {
      orderId: this.orderId,
      username: this.usernameurl,
      amount: this.amounturl,
      document: this.documenturl,
      timestamp: this.timestampurl
    }
    pixPayoutCredInfoAPI(data).then(res => {
      const data = res.data.data
      console.log()
      this.amount = data.amount
      this.document = data.document
      this.phone = data.phone
      this.email = data.email
      this.orderDateTime = data.orderDateTime
      this.username = data.username
      if (this.document === undefined && this.phone === undefined && this.email === undefined) {
        this.document1 = true
      } else {
        this.document1 = this.document
      }
    })
  },
  methods: {
    // 复制地址
    copyToClip () {
      copy(this.orderId)
      this.copyif = true
      setTimeout(() => {
        this.copyif = false
      }, 1000)
    },
    getPdf () {
      this.copyimg = false
      this.buttonif = false
      const docPDF = new JsPDF()
      const elementHTML = document.querySelector('#pdfDom')
      const orderId = this.orderId
      if (window.innerWidth <= 600) {
        const a = 370
        this.width = a
      } else {
        const a = 1100
        this.width = a
      }
      const a = this.width
      console.log(a)
      docPDF.html(elementHTML, {
        callback: function (docPDF) {
          docPDF.save('pix-' + orderId + '.pdf')
        },
        x: 15,
        y: 15,
        width: 170,
        windowWidth: a
      })
      setTimeout(() => {
        this.copyimg = true
        this.buttonif = true
      }, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
// pc端
@media screen and (min-width: 700px) {
  .pagebig {
    width: 100%;
    // background-color: #fff;
    padding-top: 5vh;
    position: relative;
    font-family: Sans-serif;
  }
  .pageson {
    position: relative;
    width: 1000px;
    background-color: #fafafa;
    margin: 0 auto;
  }
  .pageabove {
    background-color: #215dd4;
    height: 140px;
    width: 100%;
    img {
      width: 70px;
      margin: 30px 465px;
      margin-bottom: 5px;
    }
    p {
      margin: 0;
      padding: 0;
      color: #ffffff;
      font-size: 24px;
      text-align: center;
    }
  }
  .pageinputname {
    height: 35px;
    border: 0;
    width: 500px;
    float: right;
    text-align: right;
    color: #333333;
    font-size: 16px;
    font-family: Sans-serif;
    padding: 0;
    background-color: #fafafa;
  }
  input[type="text"]:focus {
    outline: none;
  }
  .pagedone {
    width: 1000px;
    height: 500px;
    background-color: #fafafa;
    color: #666666;
    font-size: 16px;
    .pagecpayimg {
      position: absolute;
      bottom: 20px;
      left: 450px;
      width: 100px;
    }
  }
  .pageorderid {
    margin: 30px 55px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #cdcdcd;
    img {
      width: 15px;
    }
    .b {
      float: right;
      color: #333333;
    }
  }
  .pageMoeda {
    margin: 18px 55px 0 55px;
    .b {
      float: right;
      color: #333333;
      letter-spacing: 1.2px;
    }
    .c {
      float: right;
      font-size: 18px;
      color: #333333;
      font-weight: 700;
    }
  }
  .pagecopysucesso {
    position: fixed;
    top: 30vh;
    left: 40%;
    width: 20%;
    font-size: 20px;
    background-color: #ebebeb;
    box-shadow: 2px 2px 2px #f5f5f5, -2px -2px 2px #f5f5f5;
    padding: 3vh 0;
    text-align: center;
    border-radius: 14px;
    color: #215dd4;
    font-weight: 700;
  }
  .pagebutton {
    text-align: center;
    width: 300px;
    height: 30px;
    margin-left: 350px;
    margin-top: 50px;
    font-size: 14px;
    border: 0;
    color: #215dd4;
    background-color: #fafafa;
    img {
      width: 15px;
      vertical-align: middle;
    }
  }
}
// 移动端
@media screen and (max-width: 700px) {
  .pagebig {
    width: 100%;
    // background-color: #fff;
    padding-top: 5vh;
    position: relative;
    font-family: Sans-serif;
  }
  .pageson {
    position: relative;
    width: 350px;
    background-color: #fafafa;
    margin: 0 auto;
  }
  .pageabove {
    background-color: #215dd4;
    height: 90px;
    width: 100%;
    img {
      width: 40px;
      margin: 20px 155px;
      margin-bottom: 3px;
    }
    p {
      margin: 0;
      padding: 0;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
    }
  }
  .pageinputname {
    height: 20px;
    border: 0;
    width: 100px;
    float: right;
    text-align: right;
    color: #333333;
    font-size: 13px;
    font-family: Sans-serif;
    padding: 0;
    background-color: #fafafa;
  }
  input[type="text"]:focus {
    outline: none;
  }
  .pagedone {
    width: 350px;
    height: 370px;
    background-color: #fafafa;
    color: #666666;
    font-size: 13px;
    padding: 10px 0;
    .pagecpayimg {
      position: absolute;
      bottom: 10px;
      left: 135px;
      width: 80px;
    }
  }
  .pageorderid {
    margin: 10px 10px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #cdcdcd;
    img {
      width: 12px;
    }
    .b {
      float: right;
      color: #333333;
    }
  }
  .pageMoeda {
    margin: 15px 10px 0 10px;
    .b {
      float: right;
      color: #333333;
      letter-spacing: 1.2px;
    }
    .c {
      float: right;
      font-size: 18px;
      color: #333333;
      font-weight: 700;
    }
  }
  .pagecopysucesso {
    position: fixed;
    top: 30vh;
    left: 10%;
    width: 80%;
    font-size: 14px;
    background-color: #ebebeb;
    box-shadow: 2px 2px 2px #f5f5f5, -2px -2px 2px #f5f5f5;
    padding: 3vh 0;
    text-align: center;
    border-radius: 14px;
    color: #215dd4;
    font-weight: 700;
  }
  .pagebutton {
    text-align: center;
    width: 140px;
    height: 30px;
    margin-left: 110px;
    margin-top: 50px;
    font-size: 14px;
    border: 0;
    color: #215dd4;
    background-color: #fafafa;
    img {
      width: 10px;
      vertical-align: middle;
    }
  }
}
</style>
